<!--
 * @Author: windys
 * @Description: 选择专栏提问
 * @Date: 2022-03-18 09:32:05
-->

<template>
  <van-dialog
    v-model:show="show"
    title="选择专栏去提问"
    show-cancel-button
    theme="round-button"
    :show-confirm-button="false"
  >
    <div class="content">
      <div
        class="item"
        v-for="item in list"
        :key="item.spcolumnId"
        @click="handleClick(item)"
      >
        <van-image
          :src="item.headUrl"
          width="40"
          height="40"
          round
          fit="contain"
        />
        <span class="spcolumnName">{{ item.spcolumnName }}</span>
      </div>
    </div>
    <van-pagination
      v-model="query.pageIndex"
      :page-count="9"
      mode="simple"
      @change="handleChangePage"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </van-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";
import { ApiGetSpcoulumList } from "../../../api/ques";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const show = ref(false);
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        }
      }
    );

    const query = reactive({
      searchType: 0,
      pageIndex: 1,
      pageSize: 9,
    });

    const list = ref([]);
    const init = async () => {
      const res = await ApiGetSpcoulumList(query);
      if (res && res.length) {
        list.value = res;
      }
    };

    const handleChangePage = (v) => {
      query.pageIndex = v;
      init();
    };

    const router = useRouter();
    const handleClick = (item) => {
      router.push({
        path: "/putQuestTo",
        query: {
          spcolumnId: item.spcolumnId,
          spcolumnUserId: item.userId,
          spcolumnUserName: item.spcolumnUserName,
        },
      });
    };
    return {
      query,
      show,
      init,
      list,
      handleChangePage,
      handleClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.content {
  margin: 25px 0;
  min-height: 100px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .item {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    .spcolumnName {
      margin: 5px 0;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #817b7b;
    }
    .btn {
      font-size: 10px;
    }
  }
}
</style>